<template>
  <div class="ware_add">
    <div class="ware_box">
      <el-form :model="form" label-width="120px">
        <el-form-item label="医疗药品">
          <el-input
            v-model="form.name"
            placeholder="请输入物品名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="医疗分类">
          <el-select v-model="form.sort" placeholder="">
            <el-option label="疫苗类" value="疫苗类" />
            <el-option label="耗材" value="耗材" />
          </el-select>
        </el-form-item>
        <el-form-item label="医品规格">
          <el-input
            v-model="form.type"
            placeholder="请输入规格，如：100ml"
            clearable
          />
        </el-form-item>
        <el-form-item label="生产日期">
          <el-date-picker
            v-model="form.starttime"
            type="date"
            placeholder="请选择生产日期"
          />
        </el-form-item>
        <el-form-item label="有效日期">
          <el-date-picker
            v-model="form.endtime"
            type="date"
            placeholder="请选择有效日期"
          />
        </el-form-item>
        <el-form-item label="入库数量">
          <el-input-number v-model="form.count" />
        </el-form-item>
        <el-form-item label="医品价格">
          <el-input-number v-model="form.price" />
        </el-form-item>
        <el-form-item label="医疗品图">
          <el-upload
            class="avatar-uploader"
            action="http://129.211.169.131:21001/drugs/uploaddrugs"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确认添加</el-button>
          <el-button type="info">返回上一级</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { Plus } from "@element-plus/icons-vue";
import dayjs from "dayjs";
import type { UploadProps } from "element-plus";
import { drugsAddReq } from "@/api/ware.api";
import { ElMessage } from "element-plus";
const form = reactive({
  name: "",
  sort: "",
  type: "",
  starttime: null,
  endtime: null,
  count: null,
  price: null,
  img: "",
});
const imageUrl = ref("");
//上传成功的钩子
const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  //   console.log(uploadFile.raw.name, "9999");
  imageUrl.value = URL.createObjectURL(uploadFile.raw!);
  form.img = uploadFile.raw.name;
};
// 确认添加
const onSubmit = async () => {
  if (
    form.name == "" ||
    form.sort == "" ||
    form.type == "" ||
    form.starttime == "" ||
    form.endtime == "" ||
    form.count == "" ||
    form.price == "" ||
    form.img == ""
  ) {
    ElMessage.error("请将信息填写完整！");
    return;
  }
  form.starttime = dayjs(form.starttime).format("YYYY-MM-DD");
  form.endtime = dayjs(form.endtime).format("YYYY-MM-DD");
  const res = await drugsAddReq(form);
  // console.log(res, "999");
  if (res.data.code == 1) {
    ElMessage({
      message: res.data.msg,
      type: "success",
    });
    form.name = "";
    form.sort = "";
    form.type = "";
    form.starttime = null;
    form.endtime = null;
    form.count = null;
    form.price = null;
    form.img = "";
    imageUrl.value = "";
  } else {
    ElMessage.error(res.data.msg);
  }
};
</script>

<style scoped lang="scss">
.ware_add {
  width: 100%;
  height: 100%;
  .ware_box {
    width: 500px;
    height: 100%;
  }
  .avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
